//- Copyright (c) 2016 Lucky Byte, Inc.
extends ../layout

append scripts
  script(src="/js/base64.min.js")
  script(src="/js/utils.js")

block content
  form.ui.form.attached.segment.main

    h3.ui.header.dividing
      i.caret.down.icon.link.grey.accordion
      | BASE64 编解码

    .ui.grid
      .column.seven.wide
        textarea(name="base64_input" type="text" rows="5" placeholder="输入数据")
        p.length(style="font-size:small; color:#aaa;") 数据长度：
          span 0
      .column.two.wide(style="text-align:center; margin-top:25px;")
        button.ui.button.green.right.labeled.icon.action.base64(
          type="button" data-action="encode") 编 码
          i.icon.arrow.right
        button.ui.button.blue.right.labeled.icon.action.base64(
          type="button" data-action="decode" style="margin-top:10px;") 解 码
          i.icon.arrow.right
      .column.seven.wide
        textarea(name="base64_output" type="text" rows="5"
          readonly="readonly" placeholder="输出数据")
        p.length(style="font-size:small; color:#aaa;") 数据长度：
          span 0

    h3.ui.header.dividing
      i.caret.down.icon.link.grey.accordion
      | XOR 异或运算

    .ui.grid
      .column.seven.wide
        .field
          .ui.input.fluid.right.labeled
            .ui.label.basic 分 量
            input(name="input1" type="text" placeholder="输入数据1")
            .ui.label.tag 0
        .field
          .ui.input.fluid.right.labeled
            .ui.label.basic 分 量
            input(name="input1" type="text" placeholder="输入数据2")
            .ui.label.tag 0
      .column.two.wide(style="text-align:center; margin-top:20px;")
        button.ui.button.green.right.labeled.icon.action(
          type="button" data-action="xor") 运 算
          i.icon.arrow.right
      .column.seven.wide(style="margin-top:20px;")
        .field
          .ui.input.fluid.right.labeled
            .ui.label.basic 结 果
            input(name="output" type="text" readonly="readonly" placeholder="输出数据")
            .ui.label.tag 0

    h3.ui.header.dividing
      i.caret.down.icon.link.grey.accordion
      | DES/EDE 加解密

    .ui.grid
      .column.seven.wide
        .field
          .ui.input.fluid.right.labeled
            .ui.label.basic 数 据
            input(name="input1" type="text" placeholder="待加解密数据")
            .ui.label.tag 0
        .field
          .ui.input.fluid.right.labeled
            .ui.label.basic 密 钥
            input(name="input1" type="text" placeholder="密钥")
            .ui.label.tag 0
      .column.two.wide(style="text-align:center; margin-top:5px;")
        button.ui.button.green.right.labeled.icon.action(
          type="button" data-action="xor") 加 密
          i.icon.arrow.right
        button.ui.button.blue.right.labeled.icon.action(
          type="button" data-action="xor" style="margin-top:10px;") 解 密
          i.icon.arrow.right
      .column.seven.wide(style="margin-top:20px;")
        .field
          .ui.input.fluid.right.labeled
            .ui.label.basic 结 果
            input(name="output" type="text" readonly="readonly" placeholder="输出数据")
            .ui.label.tag 0
